<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>应届大学生战场分组</title>
		<!--vue-->
		<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
		<!--axios-->
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<!--element-->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
		<style>
			.el-form-item {
				margin-bottom: 0px;
			}
		</style>
	</head>
	<body>
		<!-- 页面渲染 -->
		<div id="app">
			<!-- 数据展示区 -->

			<div align="center">
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="margin-bottom: 18px"  >
						<span style="float: left; padding: 3px 0" >主战场 <a style="margin-left: 50px;" href="yingjiedaxuesheng.html" type="primary"   >返回</a></span>

						<span  style="background-color: red;margin-left: 10px;width: 100px;display: inline-block;">圣教军</span>
						<span  style="background-color: blue;color: white;margin-left: 10px;width: 100px;display: inline-block;">法师</span>
						<span  style="background-color: yellow;color: black;margin-left: 10px;width: 100px;display: inline-block;">猎魔</span>
						<span  style="background-color:dodgerblue;color: white;margin-left: 10px;width: 100px;display: inline-block;">野蛮人</span>
						<span style="background-color:darkslategrey;color: white;margin-left: 10px;width: 100px;display: inline-block;">死灵</span>
						<span style="background-color:darkkhaki;color: black;margin-left: 10px;width: 100px;display: inline-block;">武僧</span>

					</div>

					<el-row :gutter="20">
						<el-col :span="3" v-for="o in groupList" >

							<el-card class="box-card">
								<div v-for="oo in o"  class="text item"  style="border-bottom: #303133 1px solid">
									<span v-if="oo.jobName=='圣教军'" style="background-color: red">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='法师'" style="background-color: blue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='猎魔'" style="background-color: yellow;color: black;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='野蛮人'" style="background-color:dodgerblue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='死灵'" style="background-color:darkslategrey;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='武僧'" style="background-color:darkkhaki;color: black;">{{oo.nickName }}</span>
									<span v-else>{{oo.nickName }}</span>
								</div>
							</el-card>

						</el-col>


				  </el-row>

				</el-card>
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="margin-bottom: 18px">
						<span style="float: left;" >副一</span>

					</div>
					<el-row :gutter="20">
						<el-col :span="3" v-for="o in groupList1" >

							<el-card class="box-card">
								<div v-for="oo in o"  class="text item" style="border-bottom: #303133 1px solid">
									<span v-if="oo.jobName=='圣教军'" style="background-color: red">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='法师'" style="background-color: blue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='猎魔'" style="background-color: yellow;color: black;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='野蛮人'" style="background-color:dodgerblue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='死灵'" style="background-color:darkslategrey;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='武僧'" style="background-color:darkkhaki;color: black;">{{oo.nickName }}</span>

									<span v-else>{{oo.nickName }}</span>
								</div>
							</el-card>

						</el-col>


					</el-row>
				</el-card>
				<el-card class="box-card">
					<div slot="header" class="clearfix" style="margin-bottom: 18px">
						<span style="float: left;" >副二</span>

					</div>
					<el-row :gutter="20">
						<el-col :span="3" v-for="o in groupList2" >

							<el-card class="box-card">
								<div v-for="oo in o"  class="text item"  style="border-bottom: #303133 1px solid">
									<span v-if="oo.jobName=='圣教军'" style="background-color: red">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='法师'" style="background-color: blue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='猎魔'" style="background-color: yellow;color: black;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='野蛮人'" style="background-color:dodgerblue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='死灵'" style="background-color:darkslategrey;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='武僧'" style="background-color:darkkhaki;color: black;">{{oo.nickName }}</span>

									<span v-else>{{oo.nickName }}</span>
								</div>
							</el-card>

						</el-col>


					</el-row>
				</el-card>

				<el-card class="box-card">
					<div slot="header" class="clearfix" style="margin-bottom: 18px">
						<span style="float: left;" >候补人员</span>

					</div>
					<el-row :gutter="20">
						<el-col :span="24" v-for="o in groupList3" >

							<el-card class="box-card">
								<templete v-for="oo in o" >
									<span v-if="oo.jobName=='圣教军'" style="background-color: red">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='法师'" style="margin-left: 10px;background-color: blue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='猎魔'" style="margin-left: 10px;background-color: yellow;color: black;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='野蛮人'" style="margin-left: 10px;background-color:dodgerblue;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='死灵'" style="margin-left: 10px;background-color:darkslategrey;color: white;">{{oo.nickName }}</span>
									<span v-else-if="oo.jobName=='武僧'" style="margin-left: 10px;background-color:darkkhaki;color: black;">{{oo.nickName }}</span>

									<span v-else>{{oo.nickName }}</span>
								</templete>
							</el-card>

						</el-col>


					</el-row>
				</el-card>
			</div>
		</div>

		<script>
			axios.defaults.baseURL = ""
			const app = new Vue({
				el: "#app",
				data: {
					groupList: [],
					groupList1: [],
					groupList2: [],
					groupList3: []
				},
				methods: {
					// 查询所有数据
					groupUsers() {
						axios.get("groupUsers2")
							.then(Promise => {
								var list = Promise.data;
								this.groupList=list.slice(0,8);

								this.groupList1=list.slice(8,16);
								this.groupList2=list.slice(16,24);
								this.groupList3=list.slice(24,25);
							})
					}
				},
				created() {
					this.groupUsers()
				}
			})
		</script>
	</body>
</html>
